<template>
  <view class="setting-wrapper">
    <view class="setting-list">
      <view class="setting-item flex-center-between" v-for="item in settingList" :key="item.type" @click="settingClick(item.type)">
        <text>{{ item.name }}</text>
        <icon class="arrow-icon"></icon>
      </view>
    </view>
    <view class="setting-list">
      <view class="setting-item flex-center-between" v-for="item in otherList" :key="item.type" @click="settingClick(item.type)">
        <text>{{ item.name }}</text>
        <text class="version" v-if="item.type == 'version'">{{ item.version }}</text>
        <icon v-else class="arrow-icon"></icon>
      </view>
    </view>

    <dui-toast ref="toast"></dui-toast>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { removeLoginInfoStorageSync } from '@/utils/storageSync'

const toast = ref(null)
const settingList = ref([])

const otherList = ref([
  {
    type: 'version',
    name: '当前版本',
    version: '1.0.0'
  },
  {
    type: 'logout',
    name: '退出登录'
  }
])

const settingClick = (type) => {
  if (type == 'logout') {
    // 退出登录前二次确认
    uni.showModal({
      title: '提示',
      content: '确定要退出登录吗？',
      success: function (res) {
        if (res.confirm) {
          // 用户点击确定
          // 1. 清除本地存储的token
          uni.removeStorageSync('token')
          // 2. 显示退出提示
          toast.value.showToast('退出登录！')
          // 3. 清除登录信息
          removeLoginInfoStorageSync()
          // 4. 跳转到登录页
          uni.navigateTo({
            url: '/pages/login/index'
          })
        }
        // 用户点击取消，不做任何操作
      }
    })
  } else if (type !== 'version') {
    // 其他设置项跳转
    uni.navigateTo({
      url: `/pages/user/setting/${type}/${type}`
    })
  }
}
</script>

<style lang="scss" scoped>
.setting-wrapper {
  padding: 30rpx;
  .setting-list {
    padding: 0 30rpx;
    margin-bottom: 20rpx;
    border-radius: 15rpx;
    background-color: #fff;
  }
  .setting-item {
    padding: 30rpx 0;
    font-size: 28rpx;
    border-bottom: 1rpx solid #f9f9f9;
    &:last-child {
      border-bottom: 0;
    }
    .version {
      color: #888;
    }
    .arrow-icon {
      width: 30rpx;
      height: 30rpx;
    }
  }
}
</style>
